<script setup>
import { onMounted, ref ,watch } from 'vue'

import { queryAllEmp,addClazz, deleteClazz } from '../../api/emp'


const checked1 = ref(true)

const shortcuts = [
  {
    text: '这个月',
    value: [new Date(), new Date()],
  },
  {
    text: '今年',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: '近六个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = ref({
  name: '',
  room: '',
  beginDate: '',
  endDate: '',
  masterId: '',
  subject: ''
})

const searchEmp = ref({name: '', begin: '', end: '' ,page: '', pageSize: ''})
const currentPage = ref(1)  // 当前页
const pageSize = ref(5)   // 每页显示的条数
const total = ref(0)   // 总记录数
const tableData = ref([])
const deletelist = ref([]) // 存放选中删除的id数组

const handleSelectionChange = (selection) => {
  deletelist.value = selection.map(item => {
    return item.id
  })
};

const dateRange = ref([])
watch(dateRange, (val) => {
  searchEmp.value.begin = val && val[0] ? val[0] : ''
  searchEmp.value.end = val && val[1] ? val[1] : ''
})

const search = async () => {
  // 只传递有值的参数
  const params = {};
  if (searchEmp.value.name) params.name = searchEmp.value.name;
  if (searchEmp.value.begin) params.begin = searchEmp.value.begin;
  if (searchEmp.value.end) params.end = searchEmp.value.end;
  params.page =  currentPage.value;
  params.pageSize = pageSize.value;
  const result = await queryAllEmp(params);
  if (result.code) { 
    tableData.value = result.data.rows
    total.value = result.data.total
  }
  console.log(searchEmp.value.begin)
}

const handlePageChange = (page) => {
  tableData.value = [];
  search(page, pageSize.value)
}

const handleSizeChange = (size) => { 
  tableData.value = [];
  search(1, size)
}

const query =  async () =>{
  const params = {};
  tableData.value = [];
  if (searchEmp.value.name) params.name = searchEmp.value.name;
  if (searchEmp.value.begin) params.begin = searchEmp.value.begin;
  if (searchEmp.value.end) params.end = searchEmp.value.end;
  params.page =  currentPage.value;
  params.pageSize = pageSize.value;
  const result = await queryAllEmp(params);
  if (result.code) { 
    tableData.value = result.data.rows
    total.value = result.data.total
  }
}
const reset = () => { 
  searchEmp.value = {name: '', begin: '', end: '' ,page: '', pageSize: ''}
  dateRange.value = []
  tableData.value = [];
  currentPage.value = 1
  pageSize.value = 5
  search()
}
const addclazz = async () => { 

  const result = await addClazz(form.value)
  if (result.code) { 
    console.log("添加成功")
  }
  dialogFormVisible.value = false
  form.value = {
    name: '',
    room: '',
    beginDate: '',
    endDate: '',
    masterId: '',
    subject: ''
  }
  search()
}

const deleteclazz = async (id) => { 
  const result = await deleteClazz(id)
  if (result.code) { 
    console.log("删除成功")
  }
  search()
}
const deleteclalist = async () => { 
  const result = await deleteClazz(deletelist.value)
  if (result.code) { 
    console.log("删除成功")
  }
  search()
}

onMounted(() => { 
  search()
})
</script>

<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="班级名称">
      <el-input v-model="searchEmp.name" placeholder="请输入班级名称" clearable />
    </el-form-item>
    <el-form-item label="结课时间">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        unlink-panels
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        :shortcuts="shortcuts"
        :size="size"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
    </div>
  <div class="button-row">
      <el-button type="primary"  class="!ml-0" plain @click="dialogFormVisible = true">+ 新增员工</el-button>
      <el-button type="primary" @click="deleteclalist">- 批量删除</el-button>
    </div>
    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="班级名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入班级名称" />
      </el-form-item>
      <el-form-item label="班级教室" :label-width="formLabelWidth">
        <el-input v-model="form.room" autocomplete="off" placeholder="请输入班级教室" />
      </el-form-item>
      <el-form-item label="开课时间" :label-width="formLabelWidth">
        <el-input v-model="form.beginDate" autocomplete="off" placeholder="请选择开课时间"/>
      </el-form-item>
      <el-form-item label="结课时间" :label-width="formLabelWidth">
        <el-input v-model="form.endDate" autocomplete="off" placeholder="请选择结课时间"/>
      </el-form-item>
      <el-form-item label="班主任" :label-width="formLabelWidth">
        <el-select v-model="form.masterId" placeholder="请选择">
          <el-option label="Zone No.1" value="1" />
          <el-option label="Zone No.2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="学科" :label-width="formLabelWidth">
        <el-select v-model="form.subject" placeholder="请选择">
          <el-option label="Zone No.1" value="1" />
          <el-option label="Zone No.2" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addclazz">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


    <!-- 表格 -->
    {{ deletelist }}
    <div class="table">
  <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
    
    <el-table-column type="selection" width="40" align="center"  >
      </el-table-column>

    <el-table-column prop="id" label="序号" width="80" align="center" />
    <el-table-column prop="name" label="班级名称" width="220" align="center" />
    <el-table-column prop="room" label="班级教室" width="120" align="center" />
    <el-table-column prop="masterId" label="班主任" width="120" align="center" />
    <el-table-column prop="beginDate" label="开课时间" width="140" align="center" />
    <el-table-column prop="endDate" label="结课时间" width="140" align="center" />
    <el-table-column label="状态" width="100" align="center">
  <template #default="scope">
    <el-tag>正常</el-tag>
  </template>
</el-table-column>
    <el-table-column prop="updateTime" label="最后操作时间" width="180" align="center" />
    <el-table-column label="操作" width="120" align="center">
      <template #default="scope">
        <span style="color: orange; cursor: pointer; margin-right: 10px;">编辑</span>
        <span style="color: orange; cursor: pointer;" @click="deleteclazz(scope.row.id)">删除</span>
      </template>
    </el-table-column>
  </el-table>
  </div>

  <!-- 分页条 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    layout="total,sizes, prev, pager, next, jumper"
    :total="total"
    :page-sizes="[5, 10, 20, 25]"
    @current-change="handlePageChange"
    @size-change="handleSizeChange"
  />
</template>

<style scoped>
.button-row {
  margin: 20px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.app-container {
  padding-top: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>